<template>
  <section class="user_wrapper">
    <div class="user_content">
      <div class="header_con">
        <div class="user_info">
          <div class="avatar_wrap">
            <img src="../../assets/images/user_img.png" alt="" />
          </div>
          <div class="name_wrap font-18">
            <span> ran18210702905 </span>
          </div>
        </div>
        <div class="account_wrap">
          <van-icon name="setting-o" class="account_wrap_icon font-20" />
        </div>
        <div class="assets_item_wrap">
          <div class="assets_item">
            <div class="assets_item_val">1110</div>
            <div class="assets_item_key">商品收藏</div>
          </div>
          <div class="assets_item">
            <div class="assets_item_val">110</div>
            <div class="assets_item_key">店铺收藏</div>
          </div>
          <div class="assets_item">
            <div class="assets_item_val">10</div>
            <div class="assets_item_key">我的足迹</div>
          </div>
        </div>
      </div>
      <!-- group -->
      <div class="xlist_group">
        <div class="xlist_group_item">
          <van-icon name="description" class="font-20" />
          <span> 待付款 </span>
        </div>
        <div class="xlist_group_item">
          <van-icon name="description" class="font-20" />
          <span> 待收货 </span>
        </div>
        <div class="xlist_group_item">
          <van-icon name="description" class="font-20" />
          <span> 退换/售后 </span>
        </div>
        <div class="xlist_group_item">
          <van-icon name="description" class="font-20" />
          <span> 全部订单 </span>
        </div>
      </div>
      <!-- item -->
      <div class="user_module_item" @click="onGoToPage('address')">
        <div class="item_module_left">
          <van-icon name="location-o" class="font-20" />
          <span class="font-16">地址管理</span>
        </div>
      </div>
      <div class="user_module_item">
        <div class="item_module_left">
          <van-icon name="coupon-o" class="font-20" />
          <span class="font-16">优惠券</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const onGoToPage = (name:string) => {
      console.log(name);
      router.push({ path: `/${name}` });
    };
    return {
      onGoToPage,
    };
  },
});
</script>

<style lang="scss" scoped>
.user_wrapper {
  background: #e6e8e9;
  min-height: 100vh;
  .user_content {
    .header_con {
      position: relative;
      height: 190px;
      padding: 10px 0;
      background: url("../../assets/images/user_head_bg.png") no-repeat scroll 0
        0 / cover;
    }
    .user_info {
      padding: 0 0 28px 18px;
      display: flex;
      align-items: center;
      .avatar_wrap {
        width: 50px;
        height: 50px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .name_wrap {
        color: white;
        padding-left: 16px;
      }
    }
    .account_wrap {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 18px;
      top: 20px;
      .account_wrap_icon {
        color: #fff;
      }
    }
    .assets_item_wrap {
      display: flex;
      justify-content: space-evenly;
      .assets_item {
        width: 116px;
        height: 50px;
        align-content: space-evenly;
        flex-wrap: wrap;
        text-align: center;
        color: #fff;
        .assets_item_val {
          width: 100%;
        }
        .assets_item_key {
          width: 100%;
        }
      }
    }

    .xlist_group {
      position: relative;
      margin-top: -10px;
      padding-top: 8px;
      background: white;
      border-radius: 12px 12px 0 0;
      display: flex;
      justify-content: space-around;
      .xlist_group_item {
        width: 86px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
      }
    }

    .user_module_item {
      background: #fff;
      padding: 16px 12px;
      margin-top: 6px;
      .item_module_left {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
